<script setup>
import { ref, nextTick } from "vue";
import Form from "@/components/Form/index.vue";
import { ElMessage } from "element-plus";
import {
  operationDataPermission,
  queryDataPermissionList,
  deleteDataPermission,
} from "@/api/System";
import { useDistInfoStore } from "@/stores/dict.js";
import { useglobalStore } from "@/stores/global.js";
import { useRouter } from "vue-router";
const globalStore = useglobalStore();
const router = useRouter();
const distInfoStore = useDistInfoStore();
const modalRef = ref();
const formRef = ref();
const tableLoading = ref(false);
const modalTitle = ref("新增商户分组");
const messageBoxRef = ref();
import { getDistInfos, getDistInfo } from "@/api/Other";
const btnLefts = ref([
  {
    label: "新增商户分组",
    plain: false,
    type: "primary",
    show: true,
    tips: "根据业务需要将所有商户进行分组。新增商户时，选择相应的商户分组即可完成分组",
    tipsStyle:
      "margin-left: 8px; color: #666666;text-align: center;font-size: 12px;font-style: normal;font-weight: 400;",
    img: new URL("@/assets/icon/btn-add.png", import.meta.url),
    click: async () => {
      openModal();
    },
  },
]);
const tableConfig = ref([
  {
    prop: "permissionId",
    label: "分组ID",
    width: "150",
  },
  {
    prop: "permissionName",
    label: "分组名称",
    width: "240",
  },
  {
    prop: "merchantCount",
    label: "商户数量",
    width: "90",
    type: "slot",
    slotName: "merchantCount",
  },
  {
    prop: "storeCount",
    label: "门店数量",
    width: "90",
  },
  {
    prop: "permissionRemark",
    label: "备注",
    // width: "300",
  },
  {
    prop: "lastUpdateTime",
    label: "最新更新",
    width: "240",
  },
  {
    type: "action",
    label: "操作",
    width: 170,
    btns: [
      {
        label: () => "编辑",
        type: "success",
        show: (row) => {
          return true;
        },
        click: async (row) => {
          delItem.value = row;
          openModal(row);
        },
      },
      {
        label: () => "删除",
        type: "danger",
        click: async (row) => {
          delItem.value = row;
          messageBoxRef.value.open();
        },
      },
    ],
  },
]);
const totalPage = ref(0);
const tableData = ref([]);

const handlerSearch = async (formInline) => {
  tableLoading.value = true;
  try {
    const { records, total } = await queryDataPermissionList({
      ...formInline,
      permissionType: 1,
    });
    totalPage.value = Number(total);
    tableData.value = records;
    tableLoading.value = false;
  } catch (e) {
    tableLoading.value = false;
  }
};

const formList = ref([
  {
    type: "input",
    key: "permissionName",
    label: "分组名称",
    width: "260px",
    clearable: true,
    maxlength: "20",
  },
  {
    type: "textarea",
    key: "permissionRemark",
    label: "备注",
    width: "260px",
    minRows: 4,
    clearable: true,
    maxlength: "100",
  },
]);
const formRules = {
  permissionName: [
    { required: true, message: "请输入分组姓名", trigger: "change" },
  ],
};
const closeModal = () => {
  modalRef.value.close();
};
const openModal = (data = void 0) => {
  modalRef.value.open();
  if (data) {
    getFormDetail(data);
  } else {
    delItem.value = null;
    modalTitle.value = "新增商户分组";
  }
};
const getFormDetail = (data) => {
  modalTitle.value = "编辑商户分组";
  nextTick(() => {
    formRef.value.setForm(data);
  });
};
const modalLoading = ref(false);
const submitModal = async () => {
  try {
    modalLoading.value = true;
    const { state, data } = await formRef.value.submitForm();
    if (state) {
      await operationDataPermission({
        ...data,
        permissionType: 1,
        id: delItem.value?.id,
      });
      closeModal();
      initSearch();
    } else {
      const messages = Object.values(data)[0];
      ElMessage({
        showClose: true,
        message: messages[0].message,
        type: "error",
      });
    }
  } finally {
    modalLoading.value = false;
  }
};
const delItem = ref();
const messageConfirm = async () => {
  await deleteDataPermission(delItem.value?.id);
  ElMessage({
    showClose: true,
    message: "删除成功",
    type: "success",
  });
  initSearch();
};
const seachTableRef = ref();
const initSearch = async () => {
  seachTableRef.value.handlerSearch();
  const distInfo = await getDistInfo();
  const distInfos = await getDistInfos();
  distInfoStore.setDistInfo(distInfo);
  distInfoStore.setDistInfos(distInfos);
};
defineExpose({ handlerSearch, initSearch });
const toMemberPage = (row) => {
  globalStore.setAllClear();
  globalStore.setMerchantId(row.id);
  router.push({ name: "MerchantChildManageIndex" });
};
</script>
<template>
  <div class="page-content">
    <SeachTable
      :tableType="1"
      ref="seachTableRef"
      :btnLefts="btnLefts"
      :tableLoading="tableLoading"
      :tableConfig="tableConfig"
      :tableData="tableData"
      :totalPage="totalPage"
      :showLine="false"
      @handlerSearch="handlerSearch"
    >
      <template #merchantCount="{ row }">
        <span
          @click="toMemberPage(row)"
          style="color: #3480ff; cursor: pointer"
          >{{ row.merchantCount || 0 }}</span
        >
      </template>
    </SeachTable>
  </div>
  <Modal ref="modalRef" :title="modalTitle" :top="'35vh'" :width="'400px'">
    <template #content>
      <Form
        class="mt14"
        ref="formRef"
        :formList="formList"
        :formRules="formRules"
        labelWidth="80px"
      ></Form>
    </template>
    <template #footer>
      <div>
        <el-button @click="closeModal">取消</el-button>
        <el-button type="primary" :loading="modalLoading" @click="submitModal"
          >确定</el-button
        >
      </div>
    </template>
  </Modal>
  <MessageBox
    ref="messageBoxRef"
    :content="'确定删除该商户分组？'"
    :rightBtnTxt="'删除'"
    @confirm="messageConfirm"
  />
</template>

<style lang="less" scoped>
.mains {
}
</style>
